<template>
  <div class="kettle_flow">
    <div class="header">
      <div class="title">
        <span v-if="!titleEdit" v-html="title" />
        <a-input v-if="titleEdit" v-model="title" />
        <a-icon v-if="!titleEdit" type="edit" @click="titleEdit = true" />
        <a-icon v-if="titleEdit" type="check" @click="titleEdit = false" />
      </div>
      <div class="space" />
      <div class="menu">
        <a-space :size="20">
          <a-dropdown :trigger="['click']">
            <a-button class="ant-dropdown-link">画板<a-icon type="down" /></a-button>
            <a-menu v-if="flow" slot="overlay">
              <a-menu-item @click="flow.zoom(true)"><a-icon type="zoom-in" />放大</a-menu-item>
              <a-menu-item @click="flow.zoom(false)"><a-icon type="zoom-out" />缩小</a-menu-item>
              <a-menu-item @click="flow.resetZoom(); flow.resetTranslate()"><a-icon type="reload" />还原</a-menu-item>
              <a-menu-item :disabled="undoDisable" @click="flow.undo()"><a-icon type="undo" />上一步</a-menu-item>
              <a-menu-item :disabled="redoDisable" @click="flow.redo()"><a-icon type="redo" />下一步</a-menu-item>
              <a-menu-item @click="flow.getSnapshot()"><a-icon type="picture" />下载图片</a-menu-item>
              <a-menu-item><a-icon type="code" />代码</a-menu-item>
            </a-menu>
          </a-dropdown>
          <a-dropdown :trigger="['click']">
            <a-button class="ant-dropdown-link">数据源<a-icon type="down" /></a-button>
            <a-menu slot="overlay">
              <a-menu-item><a-icon type="plus" />添加数据源</a-menu-item>
              <a-menu-item><a-icon type="setting" />管理数据源</a-menu-item>
            </a-menu>
          </a-dropdown>
          <a-dropdown :trigger="['click']">
            <a-button class="ant-dropdown-link">数据<a-icon type="down" /></a-button>
            <a-menu slot="overlay">
              <a-menu-item><a-icon type="import" />导入trans</a-menu-item>
              <a-menu-item><a-icon type="import" />导入job</a-menu-item>
              <a-menu-item><a-icon type="export" />导出json数据</a-menu-item>
              <a-menu-item><a-icon type="export" />导出xml数据</a-menu-item>
            </a-menu>
          </a-dropdown>
          <a-button @click="saveFlow"><a-icon type="save" />保存</a-button>
        </a-space>
      </div>
    </div>
    <div class="collapsed" :style="{left: collapsed ? '0' : nodeWidth}" @click="collapsed = !collapsed">
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
    </div>
    <div class="node-panel" :style="{width: collapsed ? '0' : nodeWidth}">
      <div class="handle">
        <a-input-search allow-clear @search="searchNode" />
        <icon v-if="collapse" type="kettle-CollapseAll" @click="collapseAll" />
        <icon v-if="!collapse" type="kettle-ExpandAll" @click="expandAll" />
      </div>
      <vue-scroll :ops="{ bar: { background: '#c1c1c1', size: '8px' } }">
        <ul class="node-tree">
          <li v-for="item in trans" :key="item.key">
            <span class="switcher" @click="expandTrans(item)">
              <a-icon :type="item.open ? 'caret-down' : 'caret-right'" />
            </span>
            <span class="content-wrapper" @click="expandTrans(item)" @dblclick="expandTrans(item)">
              <span class="icon"><icon type="kettle-folder" /></span>
              <span class="title" :title="item.title" v-html="item.title" />
            </span>
            <ul v-if="item.open" class="node-child-tree">
              <li v-for="node in transNode[item.key]" :key="node.key" :draggable="true" @dragstart="dragNode($event, node)">
                <span class="content-wrapper">
                  <span class="icon"><icon :type="node.icon" /></span>
                  <span class="title" :title="node.title" v-html="node.title" />
                </span>
              </li>
            </ul>
          </li>
        </ul>
      </vue-scroll>
    </div>
    <div class="node-search" />
    <div id="flow_view" @dragover="allowNodeDrop" @drop="nodeDrop($event)" />
    <modal-pro
      :config-type="configType"
      :config-title="configTitle"
      :config-visible="configVisible"
      @confirm="saveConfig"
      @close="saveConfig"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import bus from './core/bus'
import VueScroll from 'vuescroll'
import ModalPro from './components/ModalPro'

import LogicFlow from '@logicflow/core'
import { Snapshot, Menu } from '@logicflow/extension'

import registerNode from './node/register'
import { trans, transNode, job, jobNode } from './node/index.js'
import { ConfigMap } from './config'
import { TransAdapter } from './adapter/trans'

Vue.prototype.$bus = bus

export default {
  name: 'Index',
  components: {
    ModalPro,
    VueScroll
  },
  data() {
    return {
      title: 'Untitled',
      titleEdit: false,
      flow: null,
      nodeId: null,
      undoDisable: true,
      redoDisable: true,
      collapse: true,
      trans,
      transNode,
      searchTrans: [],
      job,
      jobNode,
      searchJob: [],
      collapsed: false,
      nodeWidth: '250px',
      configVisible: false,
      configTitle: '',
      configType: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const config = {
        container: document.querySelector('#flow_view'),
        keyboard: {
          enabled: true
        }
      }
      LogicFlow.use(Snapshot)
      LogicFlow.use(Menu)
      LogicFlow.use(TransAdapter)
      const flow = new LogicFlow({ ...config })
      // flow.updateEditConfig({
      //   nodeTextEdit: false
      // })
      flow.render({
        nodes: [],
        edges: []
      })
      flow.on('history:change', ({ data: { undoAble, redoAble } }) => {
        this.undoDisable = !undoAble
        this.redoDisable = !redoAble
      })
      registerNode(flow)

      this.flow = flow
      this.registerEvent()
    },
    registerEvent() {
      this.flow.on('node:dbclick', ({ data }) => {
        this.nodeId = data.id
        this.configTitle = '配置文件'
        this.configVisible = true
        this.configType = ConfigMap[data.type] || null
      })
      this.flow.on('connection:not-allowed', (data) => {
        console.log(data)
      })
    },
    saveConfig(config) {
      this.flow.setProperties(this.nodeId, config)
      this.configVisible = false
    },
    searchNode() {
    },
    expandTrans(item) {
      for (let i = 0; i < this.trans.length; i++) {
        if (item === this.trans[i]) {
          item.open = !item.open
        } else {
          this.trans[i].open = false
        }
      }
    },
    collapseAll() {
      this.collapse = false
      for (let i = 0; i < this.trans.length; i++) {
        this.trans[i].open = true
      }
    },
    expandAll() {
      this.collapse = true
      for (let i = 0; i < this.trans.length; i++) {
        this.trans[i].open = false
      }
    },
    dragNode(event, node) {
      event.dataTransfer.setData('key', node.key)
    },
    allowNodeDrop(event) {
      event.preventDefault()
    },
    nodeDrop(event) {
      console.group('添加节点')
      console.log('节点类型', event.dataTransfer.getData('key'))
      console.log('鼠标位置', { x: event.clientX, y: event.clientY })
      const point = this.flow.getPointByClient(event.clientX, event.clientY)
      console.log('节点位置', point.canvasOverlayPosition)
      this.flow.addNode({
        type: event.dataTransfer.getData('key'),
        x: point.canvasOverlayPosition.x,
        y: point.canvasOverlayPosition.y
      })
      console.groupEnd()
    },
    saveFlow() {
      this.flow.getGraphData()
    }
  }
}
</script>
<style lang="less">
@import './index.less';
</style>
